<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>日期选择器</title>
		<link rel="stylesheet" href="../css/api.css">
		<link rel="stylesheet" href="../css/base.css">
		<link rel="stylesheet" type="text/css" href="../css/api.css"/>
		<link rel="stylesheet" href="../lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">
		<script src="../lib/jquery.mobile-1.4.5/jquery.min.js"></script>
		<script src="../lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
		<script type="text/javascript" src="../script/api.js"></script>
		<script src="../lib/config.js"></script>
		<script src="../lib/common.js"></script>
	</head>
	<body>
		<div id="wrap">
			<header id='header'>
				<nav id="nav">
					<a id="left" onclick="api.closeWin();"> <span>返回</span> </a>
					<div id="middle">
						<strong id="title">选择日期</strong>
					</div>
					<a class="rightOK" id="btnOK"><span>确定</span></a>
				</nav>
			</header>
			<div id="main"></div>
		</div>
	</body>
	<script type="text/javascript">
		var dateStr = '';
		apiready = function() {
			api.addEventListener({
				name : 'keyback'
			}, function(ret, err) {
				api.closeWin();
			});
			var obj = api.require('UICalendar');
			obj.open({
				rect : {
					x : 0,
					y : 60
				},
				styles : {
					switchMode : 'horizontal'
				},
				bgColor : 'rgba(255, 255, 255,0.8)'
			}, function(ret, err) {
				if (ret) {
					dateStr = getFormatDate(ret.year, ret.month, ret.day);
				}
			});
		};
		$("#btnOK").click(function() {
			if (dateStr == '') {
				api.closeWin();
				return;
			}
			api.sendEvent({
				name : 'DateInputed',
				extra : {
					key1 : dateStr,
					key2 : 'value2'
				}
			});
			api.closeWin();
		});
	</script>
</html>